<template>
  <div class="custom-table-wrapper" v-html="mapStore.trajectoryDetailsTable" v-loading="mapStore.loading"
    element-loading-text="加载中..." @click="handleClick"></div>
</template>

<script setup>
import { onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import { getPersonnelList } from "@/api/getAjaxData";
import {
  getAjaxPersonnelTableData,
} from "@/api/getAjaxData.js";
import { formatTimestamp } from "@/tools/utils.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

function handleClick(event) {
  const target = event.target;

  let obj;
  if (target.getAttribute("data") !== null) {
    obj = JSON.parse(
      target.getAttribute("data").replace(/\n/g, "").replace(/%/g, '"')
    );
  } else {
    return false;
  }

  if (obj.hasOwnProperty("personName") && !obj.hasOwnProperty("lon")) {
    let startDateTime, endDateTime;
    if (mapStore.dateTimeRange.length === 0) {
      startDateTime = formatTimestamp(new Date().getTime() - 30 * 86400000);
      endDateTime = formatTimestamp(new Date().getTime());
    } else {
      startDateTime = mapStore.dateTimeRange[0];
      endDateTime = mapStore.dateTimeRange[1];
    }

    const queryInfo = {
      nameList: [obj.personName],
      startDateTime,
      endDateTime,
    };
    getPersonnelList(queryInfo)
      .then((res) => {
        mapStore.pointVisible = false;
        mapStore.allPointsVisible = false;
        mapStore.polylineVisible = true;
        mapStore.polylineData = res["personTrack"][Math.round(Math.random() * 9) + 1];
        mapStore.polylineKey = new Date().toString();
      });
  } else {
    if (obj.lat && obj.lon) {
      mapStore.polylineVisible = false;
      mapStore.allPointsVisible = false;
      mapStore.pointVisible = true;
      mapStore.pointData = obj;
      mapStore.pointKey = new Date().toString();
    } else {
      ElMessageBox.confirm(
        "当前位置经纬度没有记录，无法在地图上定位。",
        "错误提示",
        {
          confirmButtonText: "确定",
          type: "warning",
        }
      )
        .then(() => { })
        .catch(() => { });
    }
  }
}

onMounted(async () => {
  setTimeout(() => {
    getAjaxPersonnelTableData({});
  }, 2 * 1000);
});
</script>

<style scoped>
@import url("@/assets/main.css");

.custom-table-wrapper {
  height: calc(100% - 31px) !important;
  overflow: auto;
}

.custom-table-wrapper /deep/ .custom-table {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.25), rgba(94, 182, 255, 0.35), rgba(255, 255, 255, 0));
}

.custom-table-wrapper /deep/ .custom-table thead {
  position: -webkit-sticky;
  /* Safari 支持 */
  position: sticky;
  top: 0;
  /* 距离顶部的位置 */
  z-index: 1;
  /* 确保表头在其他元素之上 */
}

.custom-table-wrapper /deep/ .custom-table thead tr {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-table-wrapper /deep/ .custom-table thead th {
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(94, 182, 255, 0.35), rgba(255, 255, 255, 0)); */
  background: #3c6dad;
  padding: 8px;
  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px 1px #000;
  text-align: left;
  font-size: 15px;
  font-weight: bold;
}

.custom-table-wrapper /deep/ tr:nth-child(odd) {
  /* background: rgba(78, 93, 110, 1); */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(94, 182, 255, 0.05), rgba(255, 255, 255, 0));
}

.custom-table-wrapper /deep/ tr:nth-child(even) {
  /* background: rgba(78, 93, 110, 1); */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(94, 182, 255, 0.15), rgba(255, 255, 255, 0));
}

.custom-table-wrapper /deep/ tr:hover {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(94, 182, 255, 0.2), rgba(255, 255, 255, 0.2));
  cursor: pointer;
}

.custom-table-wrapper /deep/ .custom-table td {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 5px 10px;
  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px 1px #000;
  word-break: break-all;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 14px;
}
</style>
